import React, { Component } from 'react'
import { Grid } from 'antd-mobile'
import { shape, bool, string, number, oneOfType, func, arrayOf, any } from 'prop-types'

class GridItem extends Component {
  render() {
    let { data, hasLine, columnNum, onClick } = this.props
    return (
      <>
        <Grid
          hasLine={hasLine}
          data={data}
          columnNum={columnNum}
          activeStyle={false}
          itemStyle={{ height: '1.33rem' }}
          renderItem={(row, index) => {
            return (
              <div onClick={evt => onClick(row.id)} style={{ lineHeight: '1.33rem' }}>
                {row.title}
              </div>
            )
          }}
        />
      </>
    )
  }
}

GridItem.propTypes = {
  // data: arrayOf(shape({ id: number, title: string })).isRequired,
  data: any.isRequired,
  hasLine: bool,
  columnNum: number,
  onClick: func
}

GridItem.defaultProps = {
  hasLine: true,
  columnNum: 4,
  onClick: () => { }
}

export default GridItem
